<template>
	<view>
		<umask :show="show" @click="" :duration="0">
			<view class="page-height">
				<view class="page-content">
					<view class="wrap">
						<view class="popup-bg">
							<view class="popup-content popup-content-show">
								<view class="update-wrap">
									<image src="./img/img.png" class="top-img">
									</image>
									<view class="content">
										<text class="title">发现新版本V{{newVision}}</text>
										<!-- 升级描述 -->
										<view class="title-sub" v-html="log"></view>
										<!-- 升级按钮 -->
										<button class="btn" v-if="!pressShow" @click.stop="toUpLoad()">立即升级</button>
										<!-- 下载进度 -->
										<view class="sche-wrap" v-else>
											<!-- 更新包下载中 -->
											<view class="sche-bg">
												<view class="sche-bg-jindu" :style="{'width':pressValue+'%'}"></view>
											</view>
                      <text class="down-text">下载进度: {{ Math.floor(pressValue) }}%</text>
										</view>
									</view>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</umask>
	</view>
</template>

<script>
  import { useVersionStore } from "@/pinia-store/user.js";
	import umask from "./u-mask/u-mask.vue"
	export default {
		name: "am-upVersion",
		components: {
			umask
		},
		data() {
			return {
				pressShow: false, // 进度条显示
				pressValue: null, // 下载百分比
				uploadPopShow: false, // 升级按钮显示
        timer: null, // 定时器引用
			};
		},
		props: {
			newVision: {
				type: String,
				default: "1.0.0",
			},
			show:{
				type: Boolean,
				default:false
			},
			log:{
				type: String,
				default: "优化",
			}
		},
    beforeUnmount() {
      if (this.timer) {
        clearInterval(this.timer);
        this.timer = null;
      }
    },
		methods: {
      // 升级
			toUpLoad() {
        const versionStore = useVersionStore()
        if (this.pressShow) return;
        this.pressShow = true;
        this.pressValue = 0;

        const totalTime = 2000;
        const interval = 50;
        const step = 100 / (totalTime / interval);

        if (this.timer) clearInterval(this.timer);
        uni.clearStorageSync();


        uni.setStorageSync('localVersion', this.newVision);
        this.timer = setInterval(() => {
          this.pressValue += step;
          if (this.pressValue >= 100) {
            this.pressValue = 100;
            clearInterval(this.timer);
            this.timer = null;

            uni.showToast({
              title: '版本更新成功',
              icon: 'success',
              duration: 2000
            });


            uni.reLaunch({
              url: "/pages/user/login"
            });
            versionStore.sethasUpdate(this.newVision,false)
          }
        }, interval);


			},
	    // 关闭升级
			closeUpdate() {
        this.show = false;
        this.pressShow = false;
        this.pressValue = 0;
        if (this.timer) {
          clearInterval(this.timer);
          this.timer = null;
        }
			}
		},

	}
</script>

<style lang="scss">
	.page-height {
		// height: 100vh;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		background-color: rgba($color: #000000, $alpha: .7);
	}

	.popup-bg {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		width: 750rpx;
	}

	.popup-content {
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	.popup-content-show {
		animation: mymove 300ms;
		transform: scale(1);
	}

	@keyframes mymove {
		0% {
			transform: scale(0);
			/*开始为原始大小*/
		}

		100% {
			transform: scale(1);
		}

	}

	.update-wrap {
		width: 480rpx;
		border-radius: 18rpx;
		position: relative;
		display: flex;
		flex-direction: column;
		background-color: #ffffff;
		padding: 170rpx 30rpx 0;

		.top-img {
			position: absolute;
			left: 0;
			width: 100%;
			height: 256rpx;
			top: -128rpx;
		}

		.content {
			display: flex;
			flex-direction: column;
			align-items: center;
			padding-bottom: 40rpx;

			.title {
				font-size: 32rpx;
				font-weight: bold;
				color: #6526f3;
			}

			.title-sub {
				text-align: left;
				font-size: 24rpx;
				color: #666666;
				padding: 30rpx 0;
				white-space: pre-wrap
			}

			.btn {
				width: 460rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				color: #ffffff;
				font-size: 30rpx;
				height: 80rpx;
				line-height: 80rpx;
				border-radius: 100px;
				background-color: #6526f3;
				margin-top: 20rpx;
			}
		}
	}

	.close-ioc {
		width: 70rpx;
		height: 70rpx;
		margin-top: 30rpx;
	}

	.sche-wrap {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: flex-end;
		padding: 10rpx 50rpx 0;

		.sche-wrap-text {
			font-size: 24rpx;
			color: #666;
			margin-bottom: 20rpx;
		}

		.sche-bg {
			position: relative;
			background-color: #cccccc;
			height: 30rpx;
			border-radius: 100px;
			width: 480rpx;
			display: flex;
			align-items: center;

			.sche-bg-jindu {
				position: absolute;
				left: 0;
				top: 0;
				height: 30rpx;
				min-width: 40rpx;
				border-radius: 100px;
				background: url(./img/round.png) #5775e7 center right 4rpx no-repeat;
				background-size: 26rpx 26rpx;
			}
		}

		.down-text {
			font-size: 24rpx;
			color: #5674e5;
			margin-top: 16rpx;
		}
	}
</style>
